<template>
	<div class="web-functions">
		<div class="mechanism-management-main">
			<div class="mechanism-management-left">
				<combination-tree
					placeholder="你好"
					@search="searchChange"
					@getSelect="selectChange"
					@getColor="selectColor"
					:tree-data="treeData"
					search
				>
				</combination-tree>
			</div>
			<div class="mechanism-management-right">
				<div class="mechanism-management-righ-button-nav">
					<Button
						type="primary"
						class="mechanism-management-button"
						v-show="CheckboxDisabled"
						large
						@click="CheckboxDisabled = !CheckboxDisabled"
						>编辑权限</Button
					>
					<Button
						class="mechanism-management-button"
						v-show="!CheckboxDisabled"
						@click="CheckboxDisabled = !CheckboxDisabled"
						large
						>取消</Button
					>
					<Button
						type="primary"
						class="mechanism-management-button"
						v-show="!CheckboxDisabled"
						@click="isSave()"
						large
						>保存</Button
					>
				</div>
				<Table
					class="web-functions-table"
					:columns="columns"
					:data="tableData"
				></Table>
			</div>
		</div>
	</div>
</template>

<script>
import combinationTree from '@/components/common/tree/combination-tree.vue'

export default {
	name: 'web-functions',
	components: { combinationTree },
	props: {},
	data() {
		return {
			CheckboxDisabled: true,
			CheckboxSave: false,
			CheckboxDisabledsave: [],
			treeData: [
				{
					checked: true,
					createBy: '',
					createTime: '2018-08-10 20:40:40',
					delFlag: 0,
					designColor: false,
					id: '40322777781112832',
					isParent: true,
					level: 0,
					name: '湖南交水建集团',
					open: true,
					parentId: '0',
					parentTitle: '一级部门',
					sortOrder: 1,
					status: 0,
					title: '湖南交水建集团',
					updateBy: '',
					updateTime: '2020-08-14 15:19:03',
					children: [
						{
							checked: true,
							createBy: '',
							createTime: '2020-08-14 15:07:54',
							delFlag: 0,
							designColor: false,
							id: '306594112193171456',
							isParent: true,
							level: 1,
							name: '路桥',
							open: false,
							parentId: '40322777781112832',
							parentTitle: '湖南交水建集团',
							sortOrder: 0,
							status: 0,
							title: '路桥',
							updateBy: '',
							updateTime: '2020-08-14 15:19:36',
							children: [
								{
									checked: false,
									createBy: '',
									createTime: '2020-08-14 15:08:01',
									delFlag: 0,
									designColor: false,
									id: '306594143910498304',
									isParent: false,
									level: 2,
									name: '人力',
									open: false,
									parentId: '306594112193171456',
									parentTitle: '路桥',
									sortOrder: 0,
									status: 0,
									title: '人力',
									updateBy: '',
									updateTime: '2020-08-14 15:20:15',
								},
							],
						},
						{
							checked: true,
							createBy: '',
							createTime: '2020-06-05 09:40:33',
							delFlag: 0,
							designColor: false,
							id: '281144584648527872',
							isParent: true,
							level: 1,
							length: 0,
							name: '湖南路桥',
							open: true,
							parentId: '40322777781112832',
							parentTitle: '湖南交水建集团',
							sortOrder: 0,
							status: 0,
							title: '湖南路桥',
							updateBy: '',
							updateTime: '2020-09-28 15:16:46',
							children: [
								{
									checked: true,
									createBy: '',
									createTime: '2020-08-12 10:32:48',
									delFlag: 0,
									designColor: false,
									id: '305800105250787328',
									isParent: false,
									level: 2,

									name: '财务',
									open: true,
									parentId: '281144584648527872',
									parentTitle: '湖南路桥',
									sortOrder: 0,
									status: 0,
									title: '财务',
									updateBy: '',
									updateTime: '2020-08-14 15:20:04',
									children: [],
								},
							],
						},
					],
				},
			],
			columns: [
				{
					title: '常用功能',
					key: 'name',
					render: (h, params) => {
						let name = params.row.name
						return h('div', [
							h('Icon', {
								props: {
									type: 'ios-folder',
									size: 16,
								},
								style: {},
							}),
							h(
								'span',
								{
									style: {
										margin: '0 0 0 10px',
									},
									on: {},
								},
								name
							),
						])
					},
				},
				{
					title: '启用',
					align: 'center',
					key: 'action',
					width: 120,
					render: (h, params) => {
        
						return h('Checkbox', {
							props: {
								value: params.row.authorize,
								disabled: this.CheckboxDisabled,
							},
							on: {
								input: (value) => {
                               
									this.dataChange(
										this.getData(),
										params.row.id,
										value,
										'authorize'
									)
								},
							},
						})
					},
				},
			],
			tableData: [
				{
					id: 22322311,
					name: '财务经理',
					user: 'admin',
					roles: '机构管理员，运维管理员',
					authorize: true,
				},
				{
					id: 3223,
					name: '财务经理',
					user: 'admin',
					roles: '运维管理员',
					authorize: false,
				},
				{
					id: 23223,
					name: '财务经理',
					user: 'admin',
					roles: '机构管理员，运维管理员',
					authorize: false,
				},
				{
					id: 2332223,
					name: '财务经理',
					user: 'admin',
					roles: '机构管理员',
					authorize: false,
				},
			],
		}
	},
	watch: {
		treeData(val) {
			console.log(val)
		},

		CheckboxDisabled(val) {
			if (val) {
				if (!this.CheckboxSave) {
					this['tableData'] = JSON.parse(
						JSON.stringify(this.CheckboxDisabledsave)
					)
					console.log(this.CheckboxDisabledsave)
				} else {
					this.CheckboxSave = false
				}
			} else {
				this.CheckboxDisabledsave = JSON.parse(
					JSON.stringify(this.tableData)
				)
				console.log(this.CheckboxDisabledsave)
			}
		},
	},
	computed: {},
	methods: {
		searchChange(val) {
			console.log('搜索值:' + val)
		},
		selectChange(val) {
			console.log('返回值:' + val)
		},
		selectColor(val) {
			this.setColor(this.treeData, val.id)
		},
		setColor(datas, id) {
			//遍历树  替换数组 对象
			for (let i in datas) {
				if (datas[i].id == id) {
					datas[i].designColor = true
				} else {
					datas[i].designColor = false
				}
				if (datas[i].children) {
					this.setColor(datas[i].children, id)
				}
			}
		},
		isSave() {
			// 接口请求成功后 无论成功与否返回   this.CheckboxSave=false;
			this.CheckboxSave = true
			alert('成功！！！')
			this.CheckboxDisabled = !this.CheckboxDisabled //成功后
			//接口xxxxxx
		},
		iconClick(val) {
			if (val == 'add') {
				console.log(val)
			} else if (val == 'edit') {
				this.modalStatus = val
				this.modal13 = true
			} else if (val == 'del') {
				this.$Modal.confirm({
					title: '请确认',
					content: '你确认要删除当前页面吗?',
					onOk: () => {
						console.log('接口')
					},
				})
			}
		},
		getData() {
			//返回数据
			let data = this.tableData
			return data
		},
		expandChange(item, row, status) {
			//获取展开状态保存

			if (item instanceof Array) {
				item.forEach((element, index) => {
					if (item[index].id == row.id) {
						item[index]['_expanded'] = status
						return
					} else {
						this.expandChange(item[index].subset, row, status)
					}
				})
			}
		},
		dataChange(item, id, val, tar, items = null) {
            //修改数据的 勾选状态
            console.log(id)
			if (item instanceof Array) {
				item.forEach((element, index) => {
					if (item[index].id == id) {
						if (items == null) {
							item[index][tar] = val
						} else {
         
							items[index][tar] = val
						}
						return
					} else {
						if (item[index].subset) {
							this.dataChange(
								item[index].subset,
								id,
								val,
								tar,
								item[index].subset
							)
						}
					}
				})
			}
		},
	},
	created() {},
	mounted() {},
}
</script>
<style lang="less" scoped>
.mechanism-management-righ-button-nav {
	text-align: left;
}
.mechanism-management-button {
	height: 30px;
	margin-bottom: 16px;
	margin-left: 8px;
}
.isForm {
	padding-top: 8px;
}
.isFormItem {
	margin-bottom: 12px;
}
&/deep/.web-functions-table .ivu-icon-ios-arrow-forward {
	font-size: 18px;
}
&/deep/.web-functions-table .ivu-icon-ios-arrow-forward:before {
	content: '\f341';
}
&/deep/ th:first-child .ivu-table-cell {
	padding: 0 0;
}
&/deep/ th:nth-of-type(2) .ivu-table-cell {
	padding: 0 0;
}
&/deep/.ivu-table td {
	padding: 0 0;
	border-bottom: none;
	background-color: white;
}
&/deep/ .tableExpandedTable .ivu-table td {
	height: 0;
}
&/deep/ .ivu-table:before {
	height: 0;
}
&/deep/ tr td:nth-of-type(2) .ivu-table-cell {
	padding: 0 0;
}
.web-functions-table {
	background-color: white;
}
.web-functions {
	width: 100%;
	height: 100%;
		background-color: white;
}
.mechanism-management-main {
	width: 100%;
	height: 100%;
	position: relative;
	.mechanism-management-left {
		position: absolute;
		width: 280px;
		height: 100%;
		border-right: 1px solid #dcdee2;
		padding: 16px 16px 0 16px;

		.mechanism-management-new-button {
			width: 100%;
			height: 36px;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-items: center;
			justify-content: center;
		}
	}
	.mechanism-management-right {
		padding: 16px 16px 0 296px;
		width: 100%;
		height: 100%;
	}
}
.mechanism-management-right-new {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-items: center;
	justify-content: center;
}
&/deep/.ivu-table td,
.ivu-table th {
	border: none;
}
&/deep/ .ivu-table:before {
	height: 0;
}
</style>
